<template>
  <!-- <li class="todo-item">
    <input type="checkbox" @change="handleToggle">
    {{ id }} -
    <span v-if="!modified" @click="handleModified">{{ title }}</span>
    <input v-else type="text" :value="title" ref="inputRef">
     - {{ completed ? '已' : '未' }}完成 -
    <button @click="handleToggle">修改完成状态</button>
    <button @click="handleRemove">删除</button>
  </li> -->
  <div class="card">
    <!-- <div class="card-content" :class="completed ? 'wancheng' : ''"> -->
    <div class="card-content" :class="{wancheng: completed}">
      <div class="content">
        <span v-if="!modified" @click="handleModified">
          {{ title }} - {{ completed ? '已' : '未' }}完成
        </span>
        <input v-else type="text" :value="title" ref="inputRef">
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item" @click.prevent="handleToggle">修改完成状态</a>
      <a href="#" class="card-footer-item" @click.prevent="handleRemove">删除</a>
    </footer>
  </div>
</template>

<script>
// import bus from '../utils/bus'

export default {
  name: 'TodoItem',
  data() {
    return {
      modified: false
    }
  },
  props: {
    id: {
      type: Number
    },
    title: {
      type: String
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleToggle() {
      // bus.$emit('toggle', this.id)
      this.$bus.$emit('toggle', this.id)
    },
    handleRemove() {
      // bus.$emit('remove', this.id)
      this.$bus.$emit('remove', this.id)
    },
    /**
     * 点击 span 去显示修改待办事项的文本框，让文本框获得焦点
     */
    handleModified() {
      this.modified = true
      this.$nextTick(() => {
        // 在下一次 DOM 更新循环结束后，调用
        this.$refs.inputRef.focus()
      })
      // console.log(this.$refs)
      // console.log(this.$refs.inputRef)
    }
  }
}
</script>

<style lang="scss">
  .wancheng {
    text-decoration: line-through;
    color: #ccc;
    background-color: #666;
  }
</style>
